<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <style>
        html, body, #main {
            margin: 0;
            padding: 0;
        }

        #main {
            height: 800px;
        }
    </style>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main"></div>
<!-- ECharts单文件引入 -->
<script src="./js/echarts.js"></script>
<script src="./js/jquery.js"></script>
<script type="text/javascript">
    require.config({
        paths: {
            echarts: './js/build/dist'
        }
    });

    require(
        [
            'echarts',
            'echarts/chart/map'
        ],
        function (ec) {
            // 基于准备好的dom，初始化echarts图表
            var myChart = ec.init(document.getElementById('main'));
            var cityMap = {
                "中国": "e",
                "省会": "capital"
            };
            var curIndx = 0;
            var mapType = [];
            var mapGeoData = require('echarts/util/mapData/params');
            console.log(mapGeoData)
            for (var city in cityMap) {
                mapType.push(city);
                // 自定义扩展图表类型
                mapGeoData.params[city] = {
                    getGeoJson: (function (c) {
                        var geoJsonName = cityMap[c];
                        return function (callback) {
                            $.getJSON('./data/' + geoJsonName + '.geojson', callback);
                        }
                    })(city)
                }
            }
            var option = {
                title: {
                    text: '桃花源保护区',
                    subtext: '中林清风2017年巡记',
                    sublink: 'http://www.11467.com/qiye/30444358.htm'
                },
//                tooltip: { //鼠标移入 显示该区域文字
////                    trigger: 'item',
////                    formatter: '{b}'
//                },
                toolbox: { // 左侧小工具
                    show: false, //显示
                    orient: 'vertical',//布局方式
                    x: 'right',
                    y: 'center',
                    feature: {
                        mark: {show: true},
                        dataView: {show: true, readOnly: false},
                        restore: {show: true},
                        saveAsImage: {show: true}
                    }
                },

                legend: {
                    orient: 'vertical',
                    x:'left',
                    y:'100',
                    data:['北京 Top10', '上海 Top10', '广州 Top10'],
                    selectedMode: 'single',
                    selected:{
                        '上海 Top10' : false,
                        '广州 Top10' : false
                    },
                    textStyle : {
                        color: '#fff'
                    }
                },

                    dataRange: { //值域选择
                        min: 800,
                        max: 50000,
                        text: ['High', 'Low'],
                        realtime: false,
                        calculable: true,
                        color: ['orangered', 'yellow', 'lightskyblue']
                    },
                    series: [
                        {
//                        name: 'China Map',
                            type: 'map',//地图类型
                            mapType: '河南',
                            //selectedMode: 'single',//选择类型,
                            roam: true,//鼠标滚轮缩放
                            hoverable: true,//鼠标经过高亮
                            itemStyle: {
                                normal: {
                                    borderWidth: 2,
                                    borderColor: '#cccccc',
                                    color: '#f3f3f3',
                                    label: {
                                        show: true,
                                        textStyle: {
                                            color: '#ff0000'
                                        }
                                    }
                                },
                                emphasis: {                 // 也是选中样式
                                    borderWidth: 1,
                                    borderColor: '#00ffff',
                                    color: '#ffffff',
                                    label: {
                                        show: true,
                                        textStyle: {
                                            color: '#ff0000'
                                        }
                                    }
                                }
                            },
                            data: []
                        }
                    ]
                };
            // 为echarts对象加载数据
            myChart.setOption(option);
            myChart.resize();
            setTimeout(function (){
                window.addEventListener("resize", function () {
                    myChart.resize();
                    console.log(1);
                },200)

            });
            function eConsole(param) {
                console.log(param)
            }

//            myChart.on(ecConfig.EVENT.CLICK, eConsole);
        }
            );
</script>
</body>